<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创意工作室 - 联系我们</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <nav class="navbar">
        <div class="container">
            <a href="index.html" class="logo">创意工作室</a>
            <ul class="nav-links">
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于</a></li>
                <li><a href="projects.html">项目</a></li>
                <li><a href="contact.html" class="active">联系</a></li>
            </ul>
        </div>
    </nav>

    <section class="contact-hero">
        <div class="container">
            <h1>联系我们</h1>
            <p>让我们开始您的创意之旅</p>
        </div>
    </section>

    <section class="contact-content">
        <div class="container">
            <div class="contact-grid">
                <div class="contact-info">
                    <h2>联系方式</h2>
                    <div class="info-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <div>
                            <h3>地址</h3>
                            <p>北京市朝阳区创意园区88号</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-phone"></i>
                        <div>
                            <h3>电话</h3>
                            <p>+86 123 4567 8900</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-envelope"></i>
                        <div>
                            <h3>邮箱</h3>
                            <p>contact@creativestudio.com</p>
                        </div>
                    </div>
                    <div class="social-links" id="social-links"></div>
                </div>

                <div class="contact-form-container">
                    <h2>发送消息</h2>
                    <form class="contact-form" id="contactForm">
                        <div class="form-group">
                            <label for="name">姓名</label>
                            <input type="text" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="email">邮箱</label>
                            <input type="email" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="subject">主题</label>
                            <input type="text" id="subject" name="subject" required>
                        </div>
                        <div class="form-group">
                            <label for="message">消息</label>
                            <textarea id="message" name="message" required></textarea>
                        </div>
                        <button type="submit" class="cta-button">发送消息</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <section class="map-section">
        <div class="container">
            <h2>我们的位置</h2>
            <div class="map-container">
                <!-- 这里可以嵌入地图 -->
                <div class="map-placeholder">
                    <i class="fas fa-map-marked-alt"></i>
                    <p>地图加载中...</p>
                </div>
            </div>
        </div>
    </section>

    <section class="faq-section">
        <div class="container">
            <h2>常见问题</h2>
            <div class="faq-grid">
                <div class="faq-item">
                    <h3>项目开发周期是多久？</h3>
                    <p>项目周期根据具体需求而定，通常在2-6个月之间。我们会根据项目复杂度提供详细的时间表。</p>
                </div>
                <div class="faq-item">
                    <h3>如何开始一个项目？</h3>
                    <p>您可以通过联系表单或直接致电联系我们。我们会安排一次免费咨询，了解您的需求并提供解决方案。</p>
                </div>
                <div class="faq-item">
                    <h3>你们的服务范围是什么？</h3>
                    <p>我们提供网站设计开发、移动应用开发、品牌设计、UI/UX设计等服务。具体服务内容请查看我们的项目展示。</p>
                </div>
                <div class="faq-item">
                    <h3>如何保证项目质量？</h3>
                    <p>我们采用严格的项目管理流程，包括需求分析、原型设计、开发测试等环节，确保交付高质量的产品。</p>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>创意工作室</h3>
                    <p>打造独特的数字体验，创造无限可能</p>
                </div>
                <div class="footer-section">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="about.html">关于</a></li>
                        <li><a href="projects.html">项目</a></li>
                        <li><a href="contact.html">联系</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>联系我们</h3>
                    <p>邮箱: contact@creativestudio.com</p>
                    <p>电话: +86 123 4567 8900</p>
                </div>
            </div>
            <p class="copyright">&copy; 2024 创意工作室. All rights reserved.</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html> 